/**
 * Created by Sky on 2017/6/20.
 */

var FormulaItems = function (dom) {
    this.Dom = dom;
    this.Datasource = null;
    this.Items = [];
    this.CurrentItem = null;

    this.Init = function (datasource) {
        this.Datasource = datasource;
        for (var i = 0; i < this.Datasource.length; i++) {
            var item = new FormulaItem(this);
            item.Data = this.Datasource[i];
            this.Items.push(item);
        }

        if (this.Datasource.length > 0) {
            this.Datasource[0].IsSelected = true;
            this.CurrentItem = this.Items[0];
        }

        this.EventInit();
    };

    this.EventInit = function () {
        for (var i = 0; i < this.Items.length; i++) {
            var that = this;
            this.Items[i].OnClick = function () {
                that.ResetAllItemsEditStatus();
                this.SetSelected(true);
                that.CurrentItem = this;
            }
        }
    };

    this.Render = function () {
        $(this.Dom).html('');
        for (var i = 0; i < this.Items.length; i++) {
            $(this.Dom).append(this.Items[i].Render());
        }
    };

    this.ResetAllItemsEditStatus = function () {
        for (var i = 0; i < this.Items.length; i++) {
            this.Items[i].SetSelected(false);
        }
    };


    this.SetFormula = function (formula) {
        if (this.CurrentItem !== null) {
            this.CurrentItem.SetFormula(formula);
        }
        this.Render();
    };

    this.SetProperty = function (property) {
        if (this.CurrentItem !== null) {
            // if (this.CurrentItem.CurrentPropertyKey !== null) {
            //     // this.CurrentItem.PropertyList[this.CurrentItem.CurrentPropertyKey] = property;
            //     this.CurrentItem.PropertyList.push(property);
            // }
            this.CurrentItem.SetProperty(property);
        }

        this.Render();
    };

    this.GetValues = function () {
        var returnValues = [];

        for (var i = 0; i < this.Items.length; i++) {
            var valueItem = [];
            valueItem['auto_property'] = this.Items[i].Data;
            valueItem['formula'] = this.Items[i].Formula;
            valueItem['params'] = this.Items[i].PropertyList;

            returnValues.push(valueItem);
        }

        return returnValues;
    };

    //初始化公式
    this.InitSetFormula = function (data) {
        for (var i = 0; i < data.length; i++) {

            if (data[i].init_params == undefined) {
                continue;
            }
            var k = i - 1;
            if (i > 0) {
                this.Datasource[k].IsSelected = false;
                this.Datasource[i].IsSelected = true;
            }
            this.CurrentItem = this.Items[i];

            if (this.CurrentItem !== null) {
                this.CurrentItem.SetFormula(data[i]);
            }

            //初始化属性
            var initProperty = data[i].init_params;
            initProperty = JSON.parse(initProperty);
            for (key in initProperty) {
                this.InitSetProperty(key, initProperty[key]);
            }
        }

        this.CurrentItem = null;

        this.Render();
    };

    //初始化属性
    this.InitSetProperty = function (key, data) {
        if (this.CurrentItem !== null) {
            this.CurrentItem.InitSetProperty(key, data);
        }
    };

    //重置 属性参数
    this.resetInitFormula = function () {
        if (this.CurrentItem !== null) {
            this.CurrentItem.Formula = null;
            this.CurrentItem.PropertyList = [];
            this.CurrentItem.CurrentPropertyKey = null;
            this.CurrentItem.CurrentPropertyIsMulti = false;
            this.CurrentItem.Parent.Render();
        }
    };
};


var FormulaItem = function (parent) {
    this.Parent = parent;
    this.PropertyList = [];
    this.Dom = null;
    this.Data = null;
    this.Title = null;
    this.Formula = null;
    this.UnselectPropertyElementList = [];
    this.SelectPropertyElementList = [];
    this.CurrentPropertyKey = null;
    this.CurrentPropertyIsMulti = false;
    this.IsSelected = false;

    this.OnClick = null;

    this.Render = function () {
        // debugger;
        var frame = $('<div class="formula-item"></div>');
        var that = this;
        $(frame).click(function () {
            that.OnClick();
        });
        if (this.IsSelected === true) {
            $(frame).addClass('formula-editing');
        } else {
            $(frame).addClass('formula-edited');
        }

        var titleFrame = $('<div class="formula-item-title">' + this.Data.name + ' =</div>');
        var titleReset = $('<div class="reset"><i class="reset-icon"></i><span>重置</span></div>');
        titleReset.click(function () {
            that.Formula = null;
            that.PropertyList = [];
            that.CurrentPropertyKey = null;
            that.CurrentPropertyIsMulti = false;
            that.Parent.Render();
        });
        $(titleFrame).append($(titleReset));
        $(frame).append(titleFrame);

        var contentFrame = $('<div class="formula-detail"></div>');
        if (this.Formula === null) {
            var itemFrame = $('<div class="select-formula"></div>');
            var item = $('<a href="javascript:;" class="btn btn-select-parameter">选择公式</a>');
            if (this.IsSelected === true) {
                $(item).addClass('btn-select-formula-active');
            }
            $(itemFrame).append($(item));
            if (this.IsSelected === true) {
                $(item).addClass('btn-select-formula-active');
            }
            $(itemFrame).click(function () {
                $(this).find('a').addClass('btn-select-formula-active');
            });
            $(contentFrame).append(itemFrame);
        } else {
            var itemDataFrame = $('<div class="tag-item formula-detail-title"><span>' + this.Formula.name + '</span></div>');
            var itemDataRemove = $('<i></i>');
            $(itemDataRemove).click(function () {
                that.Formula = null;
                that.PropertyList = [];
                that.CurrentPropertyKey = null;
                that.CurrentPropertyIsMulti = false;
                that.Parent.Render();
            });
            $(itemDataFrame).append(itemDataRemove);
            $(contentFrame).append(itemDataFrame);
            var formulaParams = JSON.parse(this.Formula.params);
            var formulaParamsElement = $('<div class="formula-detail-content"></div>');
            formulaParamsElement.append($('<span class="punctuation">(</span>'));
            // debugger;
            var paramsCount = Object.keys(formulaParams).length;
            var paramsIndex = 0;
            this.UnselectPropertyElementList = [];
            this.SelectPropertyElementList = [];
            $.each(formulaParams, function (key, val) {
                // debugger;
                var existParamValue = that.GetProperty(key);
                // debugger;
                if (existParamValue === undefined || existParamValue === null) {
                    if (val.is_multi_params === 1) {
                        formulaParamsElement.append('<span style="position: relative;font-size: 14px; top: 3px;" class="punctuation">【</span>');
                        var paramsElement = $('<ul class="select-parameter"></ul>');
                        formulaParamsElement.append(paramsElement);
                        var unselectParamLiElement = $('<li></li>');
                        var unselectParamElement = $('<a href="javascript:;" class="btn btn-select-parameter">选择参数: ' + val.name + '(' + key + ')</a>');
                        unselectParamLiElement.append(unselectParamElement);
                        that.UnselectPropertyElementList.push(unselectParamElement);
                        paramsElement.append(unselectParamLiElement);
                        unselectParamElement.click(function () {
                            // debugger;
                            that.ResetAllUnselectPropertyStatus();
                            $(this).addClass('btn-select-parameter-active');
                            that.CurrentPropertyKey = key;
                            that.CurrentPropertyIsMulti = true;
                            // that.CurrentPropertyValue = val;

                            // that.Parent.Render();
                        });
                        formulaParamsElement.append('<span style="position: relative;font-size: 14px; top: 3px;" class="punctuation">】</span>');
                        var addMorePropertyBtn = $('<a href="javascript:;" class="btn-add-parameter"></a>');
                        formulaParamsElement.append(addMorePropertyBtn);
                        addMorePropertyBtn.click(function () {
                            paramsElement.append($('<li><span class="punctuation">,</span></li>'));
                            var unselectParamLiElement = $('<li></li>');
                            var unselectParamElement = $('<a href="javascript:;" class="btn btn-select-parameter">选择参数: ' + val.name + '(' + key + ')</a>');
                            unselectParamLiElement.append(unselectParamElement);
                            that.UnselectPropertyElementList.push(unselectParamElement);
                            paramsElement.append(unselectParamLiElement);
                            unselectParamElement.click(function () {
                                // debugger;
                                that.ResetAllUnselectPropertyStatus();
                                $(this).addClass('btn-select-parameter-active');
                                that.CurrentPropertyKey = key;
                                that.CurrentPropertyIsMulti = true;
                                // that.CurrentPropertyValue = val;

                                // that.Parent.Render();
                            });
                        });
                    } else {
                        unselectParamElement = $('<a href="javascript:;" class="btn btn-select-parameter">选择参数: ' + val.name + '(' + key + ')</a>');
                        that.UnselectPropertyElementList.push(unselectParamElement);
                        formulaParamsElement.append(unselectParamElement);
                        unselectParamElement.click(function () {
                            // debugger;
                            that.ResetAllUnselectPropertyStatus();
                            $(this).addClass('btn-select-parameter-active');
                            that.CurrentPropertyKey = key;
                            that.CurrentPropertyIsMulti = false;
                            // that.CurrentPropertyValue = val;

                            // that.Parent.Render();
                        });
                    }
                } else {
                    // debugger;
                    if (val.is_multi_params === 1) {
                        var multiParamsUlElement = $('<ul class="select-parameter"></ul>');
                        formulaParamsElement.append('<span style="position: relative;font-size: 14px; top: 3px;" class="punctuation">【</span>');
                        formulaParamsElement.append(multiParamsUlElement);
                        for (var i = 0; i < existParamValue.length; i++) {
                            var multiParamLiElement = $('<li></li>');
                            multiParamsUlElement.append(multiParamLiElement);
                            var selectMultiParamElement = $('<div class="tag-item formula-detail-list"><span>' + val.name + '(' + key + '): ' + existParamValue[i].name + '</span></div>');
                            var selectMultiParamRemoveElement = $('<i></i>');
                            selectMultiParamElement.append(selectMultiParamRemoveElement);
                            multiParamLiElement.append(selectMultiParamElement);
                            // $(selectMultiParamRemoveElement).click(function () {
                            //     that.PropertyList[key] = null;
                            //     that.Parent.Render();
                            // });
                            that.SelectPropertyElementList.push(selectMultiParamElement);
                            selectMultiParamElement.click(function () {
                                that.ResetAllSelectPropertyStatus();
                                $(this).addClass('formula-detail-list-active');
                                that.CurrentPropertyKey = key;
                                that.CurrentPropertyIsMulti = true;
                                // that.CurrentPropertyValue = val;

                                // that.Parent.Render();
                            });

                            if (i < existParamValue.length - 1) {
                                multiParamsUlElement.append($('<li><span class="punctuation">,</span></li>'));
                            }
                        }
                        formulaParamsElement.append('<span style="position: relative;font-size: 14px; top: 3px;" class="punctuation">】</span>');

                        var addMultiPropertyBtn = $('<a href="javascript:;" class="btn-add-parameter"></a>');
                        formulaParamsElement.append(addMultiPropertyBtn);
                        addMultiPropertyBtn.click(function () {
                            multiParamsUlElement.append($('<li><span class="punctuation">,</span></li>'));
                            var unselectParamLiElement = $('<li></li>');
                            var unselectParamElement = $('<a href="javascript:;" class="btn btn-select-parameter">选择参数: ' + val.name + '(' + key + ')</a>');
                            unselectParamLiElement.append(unselectParamElement);
                            that.UnselectPropertyElementList.push(unselectParamElement);
                            multiParamsUlElement.append(unselectParamLiElement);
                            unselectParamElement.click(function () {
                                // debugger;
                                that.ResetAllUnselectPropertyStatus();
                                $(this).addClass('btn-select-parameter-active');
                                that.CurrentPropertyKey = key;
                                that.CurrentPropertyIsMulti = true;
                                // that.CurrentPropertyValue = val;

                                // that.Parent.Render();
                            });
                        });
                    } else {
                        var selectParamElement = $('<div class="tag-item formula-detail-list"><span>' + val.name + '(' + key + '): ' + existParamValue.name + '</span></div>');
                        var selectParamRemoveElement = $('<i></i>');
                        selectParamElement.append(selectParamRemoveElement);
                        $(selectParamRemoveElement).click(function () {
                            that.PropertyList[key] = null;
                            that.Parent.Render();
                        });
                        that.SelectPropertyElementList.push(selectParamElement);
                        formulaParamsElement.append(selectParamElement);
                        selectParamElement.click(function () {
                            that.ResetAllSelectPropertyStatus();
                            $(this).addClass('formula-detail-list-active');
                            that.CurrentPropertyKey = key;
                            that.CurrentPropertyIsMulti = false;
                            // that.CurrentPropertyValue = val;

                            // that.Parent.Render();
                        });
                    }
                }
                if (paramsIndex++ < paramsCount - 1) {
                    formulaParamsElement.append($('<span class="punctuation">,</span>'));
                }
            });
            formulaParamsElement.append($('<span class="punctuation">)</span>'));

            contentFrame.append(formulaParamsElement);
            // contentFrame.append(this.FormulaElement.Render());
        }
        $(frame).append(contentFrame);

        this.Dom = frame;
        return frame;
    };

    this.ResetAllUnselectPropertyStatus = function () {
        for (var i = 0; i < this.UnselectPropertyElementList.length; i++) {
            $(this.UnselectPropertyElementList[i]).removeClass('btn-select-parameter-active');
        }
    };

    this.ResetAllSelectPropertyStatus = function () {
        for (var i = 0; i < this.SelectPropertyElementList.length; i++) {
            $(this.SelectPropertyElementList[i]).removeClass('formula-detail-list-active');
        }
    };

    this.SetSelected = function (isSelected) {
        this.IsSelected = isSelected;
        if (this.IsSelected === true) {
            this.Dom.removeClass('formula-editing').removeClass('formula-edited').addClass('formula-editing');
            // this.Dom.find('.btn-select-parameter').removeClass('btn-select-formula-active').addClass('btn-select-formula-active');
        } else {
            this.Dom.removeClass('formula-editing').removeClass('formula-edited').addClass('formula-edited');
            // this.Dom.find('.btn-select-parameter').removeClass('btn-select-formula-active');
        }
    };

    this.SetFormula = function (formula) {
        this.Formula = formula;
        // this.Render();
    };

    this.SetProperty = function (property) {
        if (this.CurrentPropertyKey !== null) {
            if (this.CurrentPropertyIsMulti === true) {
                if (this.PropertyList[this.CurrentPropertyKey] === undefined || this.PropertyList[this.CurrentPropertyKey] === null) {
                    this.PropertyList[this.CurrentPropertyKey] = [];
                }
                this.PropertyList[this.CurrentPropertyKey].push(property);
            } else {
                this.PropertyList[this.CurrentPropertyKey] = property;
            }
        }
        // this.Render();
    };

    this.GetProperty = function (propertyKey) {
        return this.PropertyList[propertyKey];
    };

    //初始化属性
    this.InitSetProperty = function (key, property) {
        this.CurrentPropertyKey = key;
        if (this.CurrentPropertyKey !== null) {
            if (this.CurrentPropertyIsMulti === true) {
                if (this.PropertyList[this.CurrentPropertyKey] === undefined || this.PropertyList[this.CurrentPropertyKey] === null) {
                    this.PropertyList[this.CurrentPropertyKey] = [];
                }
                this.PropertyList[this.CurrentPropertyKey].push(property);
            } else {
                this.PropertyList[this.CurrentPropertyKey] = property;
            }
        }
        // this.Render();
    };
};
